<template>
  <view class="container">

    <view class="form">
      <view class="title">商家信息</view>
      <view class="form-item">
        <view class="label">商家名称:</view>
        <input class="input" type="text" v-model="form.shopName" placeholder="请输入商家名称"/>
      </view>
      <view class="form-item">
        <view class="label">logo:</view>
        <image class="image1" :src="imageUrl2" @click="addLogo"><text class="text1">+</text></image>
      </view>
      <view class="form-item">
        <view class="label">联系人:</view>
        <input class="input" type="text" v-model="form.contactName" placeholder="请输入联系人姓名"/>
      </view>
      <view class="form-item">
        <view class="label">联系电话:</view>
        <input class="input" type="tel" v-model="form.contactPhone" placeholder="请输入联系电话"/>
      </view>
      <view class="form-item">
        <view class="label">商家地址:</view>
        <input class="input" type="text" v-model="form.shopUrl" placeholder="请输入商家地址"/>
      </view>
      <view class="form-item">
        <view class="label">详细地址:</view>
        <input class="input" type="text" v-model="form.shopAddress" placeholder="请输入详细地址"/>
      </view>
      <view class="form-item">
        <view class="label">主营产品:</view>
        <textarea class="textarea" v-model="form.mainProducts" placeholder="请输入主营产品"></textarea>
      </view>
      <view class="title">店铺资质</view>
      <view class="form-item">
        <view class="label">法人姓名:</view>
        <input class="input" type="text" v-model="form.legalPersonName" placeholder="请输入法人姓名"/>
      </view>
      <view class="form-item">
        <view class="label">法人证件号:</view>
        <input class="input" type="text" v-model="form.legalPersonDocument" placeholder="请输入法人证件号"/>
      </view>
      <view class="form-item">
        <view class="label">法人证件照:</view>
        <image class="image1" :src="imageUrl1" @click="addLicense"><text class="text1">+</text></image>
      </view>
      <view class="form-item">
        <view class="label">营业执照:</view>
        <image class="image1" :src="imageUrl" @click="uploadLicense"><text class="text1">+</text></image>
      </view>
      <view class="form-item">
        <view class="label">营业执照号:</view>
        <input class="input" v-model="form.licenseNumber" placeholder="请输入营业执照号"/>
      </view>
      <view class="form-item">
        <view class="label">经营范围:</view>
        <textarea class="textarea" v-model="form.businessScope" placeholder="请输入经营范围"></textarea>
      </view>

      <view class="title">企业资质信息</view>
      <view class="form-item">
        <view class="label">公司名称:</view>
        <input class="input" type="text" v-model="form.corporateName" placeholder="请输入公司名称"/>
      </view>
      <view class="form-item">
        <view class="label">公司所在地:</view>
        <input class="input" v-model="form.corporateUrl" placeholder="请输入公司所在地"/>
      </view>
      <view class="form-item">
        <view class="label">公司详细地址:</view>
        <input class="input" v-model="form.corporateAddress" placeholder="请输入公司详细地址"/>
      </view>
      <view class="form-item">
        <view class="label">员工总数:</view>
        <input class="input" v-model="form.corporateCount" placeholder="请输入员工总数"/>
        <template>人</template>
      </view>
      <view class="form-item">
        <view class="label">公司电话:</view>
        <input class="input" v-model="form.corporatePhone" placeholder="请输入公司电话"/>
      </view>
      <view class="form-item">
        <view class="label">注册资金:</view>
        <input class="input" v-model="form.registeredCapital" placeholder="请输入注册资金"/>
        <template>万元</template>
      </view>
      <view class="form-item">
        <view class="label">联系人姓名:</view>
        <input class="input" v-model="form.contactName" placeholder="请输入联系人姓名"/>
      </view>
      <view class="form-item">
        <view class="label">联系人电话:</view>
        <input class="input" v-model="form.contactPhone" placeholder="请输入联系人电话"/>
      </view>
      <view class="form-item">
        <view class="label">电子邮箱:</view>
        <input class="input" v-model="form.contactEmail" placeholder="请输入电子邮箱"/>
      </view>
      <view class="title">商家账户</view>
      <view class="form-item">
        <view class="label">银行开户名:</view>
        <input class="input" v-model="form.bankAccountName" placeholder="请输入银行开户名"/>
      </view>
      <view class="form-item">
        <view class="label">银行账号:</view>
        <input class="input" v-model="form.bankAccount" placeholder="请输入银行账号"/>
      </view>
      <view class="form-item">
        <view class="label">开户行支行名称:</view>
        <input class="input" v-model="form.subBranch" placeholder="请输入开户行支行名称"/>
      </view>
      <view class="form-item">
        <view class="label">支行联行号:</view>
        <input class="input" v-model="form.lineNumber" placeholder="请输入支行联行号"/>
      </view>
      <button class="submit-btn" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
import {addApply, uploadFile} from "../../../api/shop/shop";
export default {

  data() {
    return {
      imageUrl:'',//营业执照
      imageUrl1:'',//法人证件照
      imageUrl2:'',//店铺logo
      form: {
        shopName: '',//店铺名称
        shopLogo:'',//logo
        contactName: '',//联系人姓名
        contactPhone: '',//联系人电话
        shopUrl: '',//店铺地址
        shopAddress: '',//店铺详细地址
        legalPersonDocument: '',//法人证件号
        legalPersonImage: '',//法人证件照
        businessScope: '',//法定经营范围
        mainProducts: '',//主营产品
        corporateName: '',//公司名称
        corporateUrl: '', //公司地址
        corporateAddress: '',//公司详细地址
        corporateCount: '',//员工总数
        corporatePhone: '',//公司联系人电话
        registeredCapital: '',//注册资金
        contactEmail: '',//公司邮箱
        bankAccountName: '',//银行开户名
        bankAccount: '',//银行账号
        subBranch: '',//开户行支行名称
        lineNumber: '',//支行联号
        shopELicense:"",//营业执照电子版
        legalPersonName:'',//法人姓名
        licenseNumber:'',//营业执照号
      },
    }
  },
  methods: {
    uploadLicense() {
      // 调用uni-app的上传文件接口，选择营业执照图片并上传
      uni.chooseImage({
        success: (res) => {
          // 获取选择的文件路径
          const filePath = res.tempFilePaths[0]
          // 调用上传文件接口
          uploadFile({name: "file", filePath}).then(resp=>{
            this.form.shopELicense = resp.data.url
            this.imageUrl=resp.data.url
          })

        },
      })
    },
    addLicense() {
      // 调用uni-app的上传文件接口，选择营业执照图片并上传
      uni.chooseImage({
        success: (res) => {
          // 获取选择的文件路径
          const filePath = res.tempFilePaths[0]
          // 调用上传文件接口
          uploadFile({name: "file", filePath}).then(resp=>{
            this.form.legalPersonImage = resp.data.url
            this.imageUrl1=resp.data.url
          })

        },
      })
    },
    addLogo(){
      // 调用uni-app的上传文件接口，选择营业执照图片并上传
      uni.chooseImage({
        success: (res) => {
          // 获取选择的文件路径
          const filePath = res.tempFilePaths[0]
          // 调用上传文件接口
          uploadFile({name: "file", filePath}).then(resp=>{
            this.form.shopLogo = resp.data.url
            this.imageUrl2=resp.data.url
          })

        },
      })
    },
    submit() {
      // 提交商家入驻信息
      // 可以将商家入驻信息发送给后端接口进行处理
      addApply(this.form)
      uni.showToast({
        title: '提交成功,等待平台审核',
        icon: 'success',
      });
      uni.switchTab({
        url: '/pages/mine/index' // 切换到名为home的底部选项卡（Tabbar）页面
      });
    },
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  width: 100px;
}

.input {
  flex: 1;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
}

.textarea {
  flex: 1;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
}

.submit-btn {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border-radius: 4px;
  background-color: #007aff;
  color: #fff;
  text-align: center;
  margin-top: 20px;
}
.image1{
  width: 150px;
  height: 150px;
  border:1px dotted #666;
  border-radius: 5px;
  overflow: hidden;
}
.text1{
  position: relative;
  font-size: 40px;
  left: -85px;
  color: #666;
  z-index: -1;
}
</style>
